/*
 * @Author: xiaosihan 
 * @Date: 2023-03-09 18:51:11 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-03-09 19:15:35
 */

import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
import threeLoader from "../threeLoader";
import planeModalPNG from "./planeModal.png";


export type PlaneModal1Config = {
    size?: number,
    title?: string,
    titleColor?: string,
    texts?: Array<{
        text?: string,
        color?: string,
        size?: number
    }>
}

// 平面模型弹窗
export default class PlaneModal1 extends Mesh {

    constructor(config: PlaneModal1Config = {}) {
        super();
        this.updata(config);
        this.material.map = this.texture;
        // this.scale.set(10, 10, 10);
    }

    geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);

    material = new MeshBasicMaterial({
        side: DoubleSide,
        transparent: true,
        alphaTest: 0.01
    });

    // 背景图
    static img = (() => {
        const img = new Image();
        img.src = planeModalPNG;
        return img;
    })();

    canvas = (() => {
        const canvas = document.createElement("canvas");
        canvas.width = 660;
        canvas.height = 481;
        return canvas;
    })();

    context = this.canvas.getContext("2d")!;

    texture = threeLoader.getTexture(this.canvas);

    // 配置
    _config: {
        size: number,
        title: string,
        titleColor: string,
        texts: Array<{
            text: string,
            color: string,
            size: number
        }>
    } = {
            size: 10,
            title: "PlaneModal1",
            titleColor: "#ffffff",
            texts: []
            // [
            //     {
            //         text: "1",
            //         color: "#ffff00",
            //         size: 40
            //     },
            //     {
            //         text: "2",
            //         color: "#ff00ff",
            //         size: 40
            //     },
            // ]
        }

    async updata(config: PlaneModal1Config) {

        Object.assign(this._config, config)

        //绘制背景
        this.context.clearRect(0, 0, 660, 481);

        while (!PlaneModal1.img.complete) {
            await new Promise(resolve => setTimeout(resolve, 100));
        }

        // 设置大小
        this.scale.set(this._config.size, this._config.size, this._config.size);

        // this.context.fillStyle = "#00000088";
        // this.context.fillRect(0, 0, 660, 481);

        //绘制背景
        this.context.drawImage(PlaneModal1.img, 0, 0);

        // 绘制标题
        this.context.fillStyle = this._config.titleColor;
        this.context.font = '40px serif';// 设置字体大小
        this.context.textAlign = "left";
        this.context.textBaseline = "top";
        this.context.fillText(this._config.title, 60, 72);

        let textPos = new Vector2(60, 150);
        let maxWidth = 530;
        // 绘制内容
        this._config.texts.map(({ text = "text", color = "#ffffff", size = 40 }) => {
            this.context.fillStyle = color;
            this.context.font = `${size}px serif`;// 设置字体大小
            this.context.textAlign = "left";
            this.context.textBaseline = "top";

            // 字符分隔为数组
            var arrText = text.split('');
            var line = '';

            for (var n = 0; n < arrText.length; n++) {
                var metrics = this.context.measureText(line + arrText[n]);
                var testWidth = metrics.width;
                if ((testWidth > maxWidth && n > 0) || arrText[n] === "\n") {
                    this.context.fillText(line, textPos.x, textPos.y);
                    line = "";
                    textPos.y += size;
                } else {
                    line += arrText[n];
                }
            }

            this.context.fillText(line, textPos.x, textPos.y);
            textPos.y += size;
        });

        this.texture.needsUpdate = true;

        this.dispatchEvent({ type: "loaded" } as never);
    }


}